<template>
<div class="params-controls">
    <el-tooltip popper-class="field-tips" :disabled="item.disabled||list.length===0" placement="bottom">
        <template slot="content">
            <div class="content-tip-head">
                <span @click="item.disabled=true">固定</span>
            </div>
            <div class="val-list scroll-bar">
                <div class="val-list-item" v-for="(item, i) in list" :key="i">{{item}}</div>
            </div>
        </template>
        <el-button :disabled="item.isDisabled" class="select-btn" @click="$emit('save')">
            {{list.length>0?`已选择${list.length}个字段`:'选择字段'}}
        </el-button>
    </el-tooltip>
    <div v-if="item.disabled" class="field-box">
        <div class="content-tip-head">
            <span class="selected-field">已选择字段</span>
            <span @click="item.disabled=false">关闭</span>
        </div>
        <div class="val-list scroll-bar">
            <div class="val-list-item" v-for="(item, i) in list" :key="i">{{item}}</div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'SelectField',
    props: {
        item: {
            type: Object,
            required: true
        },
        list: {
            type: Array,
            required: true
        }
    }
}
</script>

<style lang="less">
.params-controls {
    width: 100%;

    .select-btn {
        width: 100%;
    }

    .el-form-item__content {
        display: flex;
        flex-direction: column;
    }

    .val-list {
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 4px;
        width: 100%;
        background: #ffffff;
        border: 1px solid #ebeef5;

        .val-list-item {
            height: 27px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ebeef5;
            font-size: 12px;
            padding-right: 5px;
            padding-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .item-name {
                color: #333333;
                padding-right: 10px;
            }

            .item-value {
                color: #999999;
            }
        }

        .val-list-item:last-child {
            border: none;
        }
    }

    .field-box {
        overflow: hidden;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-top: 15px;
        padding: 10px;
        background: #ffffff;

        .content-tip-head {
            padding: 0;
        }

        .val-list {
            border: none;
            padding: 0;
        }
    }

    .content-tip-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        height: 27px;
        font-size: 12px;
        background: #ffffff;

        .selected-field {
            color: #999999;
        }

        span {
            color: #2680eb;
            cursor: pointer;
        }
    }
}

.field-tips {
    .content-tip-head {
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
        padding-bottom: 5px;
        font-size: 12px;

        span {
            color: #2680eb;
            cursor: pointer;
        }
    }

    .val-list {
        min-width: 150px;
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;

        .val-list-item {
            line-height: 27px;
            text-align: center;
            border-top: 1px solid #ebeef5;
            font-size: 12px;
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #ffffff;
        }
    }
}
</style>
